Padziļināti React Context API modeļi stāvokļa pārvaldībai

React Context API nodrošina jaudīgu mehānismu stāvokļa koplietošanai visā jūsu lietotnē, neizmantojot "prop drilling". Lai gan pamatlietojums ir vienkāršs, tā pilnīga potenciāla izmantošana prasa izpratni par padziļinātiem modeļiem, kas spēj tikt galā ar sarežģītiem stāvokļa pārvaldības scenārijiem. Šajā rakstā tiek apskatīti vairāki šādi modeļi, piedāvājot praktiskus piemērus un noderīgas atziņas, lai uzlabotu jūsu React izstrādi.

Pamatlīmeņa Context API ierobežojumu izpratne

Pirms iedziļināties padziļinātos modeļos, ir svarīgi apzināties pamatlīmeņa Context API ierobežojumus. Lai gan tas ir piemērots vienkāršam, globāli pieejamam stāvoklim, tas var kļūt neveikls un neefektīvs sarežģītās lietotnēs ar bieži mainīgu stāvokli. Katrs komponents, kas izmanto kontekstu, tiek atkārtoti renderēts, kad konteksta vērtība mainās, pat ja komponents nav atkarīgs no konkrētās stāvokļa daļas, kas tika atjaunināta. Tas var radīt veiktspējas problēmas.

1. modelis: Saliktie komponenti ar kontekstu

Salikto komponentu modelis uzlabo Context API, izveidojot saistītu komponentu kopumu, kas netieši koplieto stāvokli un loģiku, izmantojot kontekstu. Šis modelis veicina atkārtotu izmantošanu un vienkāršo API tā lietotājiem. Tas ļauj iekapsulēt sarežģītu loģiku ar vienkāršu ieviešanu.

Piemērs: Cilņu (Tab) komponents

Ilustrēsim to ar cilņu (Tab) komponentu. Tā vietā, lai nodotu rekvizītus (props) caur vairākiem slāņiem, Tab komponenti netieši sazinās, izmantojot koplietotu kontekstu.

// TabContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// Usage
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

Ieguvumi:

• Vienkāršots API lietotājiem: Lietotājiem jāuztraucas tikai par Tab, TabList un TabPanel.
• Netieša stāvokļa koplietošana: Komponenti automātiski piekļūst un atjaunina koplietoto stāvokli.
• Uzlabota atkārtota izmantojamība: Tab komponentu var viegli atkārtoti izmantot dažādos kontekstos.

2. modelis: Dinamiskie konteksti

Dažos gadījumos jums var būt nepieciešamas dažādas konteksta vērtības atkarībā no komponenta pozīcijas komponentu kokā vai citiem dinamiskiem faktoriem. Dinamiskie konteksti ļauj jums izveidot un nodrošināt konteksta vērtības, kas mainās atkarībā no konkrētiem nosacījumiem.

Piemērs: Tēmošana ar dinamiskiem kontekstiem

Apsveriet tēmošanas sistēmu, kurā vēlaties nodrošināt dažādas tēmas atkarībā no lietotāja preferencēm vai lietotnes sadaļas, kurā viņi atrodas. Mēs varam izveidot vienkāršotu piemēru ar gaišo un tumšo tēmu.

// ThemeContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// Usage
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

Šajā piemērā ThemeProvider dinamiski nosaka tēmu, pamatojoties uz isDarkTheme stāvokli. Komponenti, kas izmanto useTheme āķi (hook), automātiski tiks atkārtoti renderēti, kad tēma mainīsies.

3. modelis: Konteksts ar useReducer sarežģītam stāvoklim

Lai pārvaldītu sarežģītu stāvokļa loģiku, Context API apvienošana ar useReducer ir lieliska pieeja. useReducer nodrošina strukturētu veidu, kā atjaunināt stāvokli, pamatojoties uz darbībām, un Context API ļauj jums koplietot šo stāvokli un "dispatch" funkciju visā jūsu lietotnē.

Piemērs: Vienkāršs uzdevumu saraksts

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// Usage
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

Šis modelis centralizē stāvokļa pārvaldības loģiku reducētājā (reducer), padarot to vieglāk saprotamu un testējamu. Komponenti var izsaukt darbības (dispatch actions), lai atjauninātu stāvokli, nepārvaldot stāvokli tieši.

4. modelis: Optimizēti konteksta atjauninājumi ar `useMemo` un `useCallback`

Kā minēts iepriekš, galvenais veiktspējas apsvērums ar Context API ir nevajadzīgi atkārtoti renderējumi. Izmantojot useMemo un useCallback, var novērst šos atkārtotos renderējumus, nodrošinot, ka tiek atjauninātas tikai nepieciešamās konteksta vērtības daļas un ka funkciju atsauces paliek stabilas.

Piemērs: Tēmas konteksta optimizēšana

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

Skaidrojums:

• useCallback memoizē toggleTheme funkciju. Tas nodrošina, ka funkcijas atsauce mainās tikai tad, kad mainās isDarkTheme, novēršot nevajadzīgus atkārtotus renderējumus komponentos, kas ir atkarīgi tikai no toggleTheme funkcijas.
• useMemo memoizē konteksta vērtību. Tas nodrošina, ka konteksta vērtība mainās tikai tad, kad mainās vai nu theme, vai toggleTheme funkcija, tādējādi vēl vairāk novēršot nevajadzīgus atkārtotus renderējumus.

Bez useCallback, toggleTheme funkcija tiktu izveidota no jauna katrā ThemeProvider renderēšanas reizē, izraisot value maiņu un izraisot atkārtotu renderēšanu jebkurā to izmantojošā komponentā, pat ja pati tēma nebūtu mainījusies. useMemo nodrošina, ka jauna value tiek izveidota tikai tad, kad mainās tās atkarības (theme vai toggleTheme).

5. modelis: Konteksta selektori

Konteksta selektori ļauj komponentiem abonēt tikai konkrētas konteksta vērtības daļas. Tas novērš nevajadzīgus atkārtotus renderējumus, kad mainās citas konteksta daļas. Lai to panāktu, var izmantot tādas bibliotēkas kā `use-context-selector` vai pielāgotas implementācijas.

Piemērs, izmantojot pielāgotu konteksta selektoru

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // You would typically subscribe to context changes here. Since this is a simplified
    // example, we'll just call subscription immediately to initialize.
    subscription();

    return () => {
      didUnmount = true;
      // Unsubscribe from context changes here, if applicable.
    };
  }, [value]); // Re-run effect whenever the context value changes

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Simplified for brevity)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// Usage
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

Šajā piemērā BackgroundComponent tiek atkārtoti renderēts tikai tad, kad mainās tēmas background īpašība, un ColorComponent tiek atkārtoti renderēts tikai tad, kad mainās color īpašība. Tas ļauj izvairīties no nevajadzīgiem atkārtotiem renderējumiem, kad mainās visa konteksta vērtība.

6. modelis: Darbību atdalīšana no stāvokļa

Lielākām lietotnēm apsveriet iespēju sadalīt konteksta vērtību divos atsevišķos kontekstos: viens stāvoklim un otrs darbībām (dispatch funkcijām). Tas var uzlabot koda organizāciju un testējamību.

Piemērs: Uzdevumu saraksts ar atsevišķiem stāvokļa un darbību kontekstiem

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// Usage
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Šī atdalīšana ļauj komponentiem abonēt tikai to kontekstu, kas viņiem ir nepieciešams, samazinot nevajadzīgus atkārtotus renderējumus. Tāpat kļūst vieglāk veikt reducētāja un katra komponenta vienības testēšanu (unit testing) izolēti. Svarīga ir arī "provider" ietīšanas secība. ActionProvider ir jāietver StateProvider.

Labākās prakses un apsvērumi

• Kontekstam nevajadzētu aizstāt visas stāvokļa pārvaldības bibliotēkas: Ļoti lielām un sarežģītām lietotnēm specializētas stāvokļa pārvaldības bibliotēkas, piemēram, Redux vai Zustand, joprojām var būt labāka izvēle.
• Izvairieties no pārmērīgas kontekstualizācijas: Ne katrai stāvokļa daļai jāatrodas kontekstā. Izmantojiet kontekstu apdomīgi patiesi globālam vai plaši koplietotam stāvoklim.
• Veiktspējas testēšana: Vienmēr mēriet sava konteksta lietojuma ietekmi uz veiktspēju, īpaši, ja strādājat ar bieži atjaunināmu stāvokli.
• Koda sadalīšana (Code Splitting): Izmantojot Context API, apsveriet lietotnes koda sadalīšanu mazākos gabalos. Tas ir īpaši svarīgi, ja neliela stāvokļa maiņa izraisa lielas lietotnes daļas atkārtotu renderēšanu.

Noslēgums

React Context API ir daudzpusīgs rīks stāvokļa pārvaldībai. Izprotot un pielietojot šos padziļinātos modeļus, jūs varat efektīvi pārvaldīt sarežģītu stāvokli, optimizēt veiktspēju un veidot uzturējamākas un mērogojamākas React lietotnes. Atcerieties izvēlēties pareizo modeli savām konkrētajām vajadzībām un rūpīgi apsvērt sava konteksta lietojuma ietekmi uz veiktspēju.

Līdz ar React attīstību, attīstīsies arī labākās prakses saistībā ar Context API. Būšana informētam par jaunām tehnikām un bibliotēkām nodrošinās, ka esat gatavs risināt mūsdienu tīmekļa izstrādes stāvokļa pārvaldības izaicinājumus. Apsveriet iespēju izpētīt jaunus modeļus, piemēram, konteksta izmantošanu ar signāliem, lai panāktu vēl smalkāku reaktivitāti.